<template>
  <div @click="$router.push('/details/' + article.id)">
    <!-- 普通文章  一张以上 三张以下图片 -->
    <div
      class="singlePost"
      v-if="
        article.type === 1 &&
        article.cover.length < 3 &&
        article.cover.length > 0
      "
    >
      <div class="left">
        <div class="title">{{ article.title }}</div>
        <div class="info">
          {{ article.user.nickname || article.user.username }}
          {{ article.comment_length }}跟帖
        </div>
      </div>
      <div class="right">
        <img :src="article.cover[0].url | flxImgUrl" alt="" />
      </div>
    </div>
    <!-- 精彩文章  3张以上  -->
    <div
      class="multiPost"
      v-if="article.type === 1 && article.cover.length >= 3"
    >
      <div class="title">{{ article.title }}</div>
      <div class="images">
        <img :src="article.cover[0].url | flxImgUrl" alt="" />
        <img :src="article.cover[1].url | flxImgUrl" alt="" />
        <img :src="article.cover[2].url | flxImgUrl" alt="" />
      </div>
      <div class="info">
        {{ article.user.nickname || article.user.username }}
        {{ article.comment_length }}跟帖
      </div>
    </div>
    <!-- 视频文章  1张以上-->
    <div
      class="videoPost"
      v-if="article.type === 2 && article.cover.length > 0"
    >
      <div class="title">{{ article.title }}</div>
      <div class="images">
        <img :src="article.cover[0].url | flxImgUrl" alt="" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="info">
        {{ article.user.nickname || article.user.username }}
        {{ article.comment_length }}跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["article"],
};
</script>
<style lang="less" scoped>
.singlePost {
  display: flex;
  padding: 16 / 360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 16 / 360 * 100vw;
      color: #333;
    }
    .info {
      font-size: 14 / 360 * 100vw;
      color: #888;
    }
  }
  .right {
    img {
      width: 121 / 360 * 100vw;
      height: 72 / 360 * 100vw;
      object-fit: cover;
    }
  }
}
.multiPost {
  padding: 16 / 360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16 / 360 * 100vw;
    color: #333;
  }
  .images {
    display: flex;
    justify-content: space-between;

    margin: 10 / 360 * 100vw 0;
    img {
      width: 33%;
      height: 74 / 360 * 100vw;
      object-fit: cover;
    }
  }
  .info {
    font-size: 14 / 360 * 100vw;
    color: #888;
  }
}
.videoPost {
  padding: 16 / 360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16 / 360 * 100vw;
    color: #333;
  }
  .images {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10 / 360 * 100vw 0;
    .iconshipin {
      position: absolute;
      color: white;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 46 /360 * 100vw;
      border-radius: 50%;
    }
    img {
      width: 100%;
      height: 170 / 360 * 100vw;
      object-fit: cover;
    }
  }
  .info {
    font-size: 14 / 360 * 100vw;
    color: #888;
  }
}
</style>